<template>
	<view class="content">
		<!-- <text>123</text> -->
		<view class="personal-data">
			<image :src="Information.avatarUrl" mode=""></image>
			<text style="font-weight: 500; width: 150rpx;">{{Information.nickName}}</text>
			<text style="font-size: 24rpx;">{{Information.phone}}</text>
		</view>
		<view class="navigation-box">
			<view class="navigation-box-item" @tap="toPersonalData">
				<view class="logo-info">
					<image src="../../static/Group 218.png" mode=""></image>
					<text>个人信息</text>
				</view>
				<image class="jiantou" src="../../static/Vector 79.png" mode=""></image>
			</view>
			<view class="navigation-box-item">
				<view class="logo-info">
					<image src="../../static/Group 117.png" mode=""></image>
					<text>常用地址</text>
				</view>
				<image class="jiantou" src="../../static/Vector 79.png" mode=""></image>
			</view>
			<view class="navigation-box-item">
				<view class="logo-info">
					<image src="../../static/Group 214.png"mode=""></image>
					<text>经营公示</text>
				</view>
				<image class="jiantou" src="../../static/Vector 79.png" mode=""></image>
			</view>
			<view class="navigation-box-item">
				<view class="logo-info">
					<image src="../../static/Frame 199.png" mode=""></image>
					<text>帮助中心</text>
				</view>
				<image class="jiantou" src="../../static/Vector 79.png" mode=""></image>
			</view>
		</view>
		<button class="btn-quit">退出登录</button>
	</view>
</template>

<script>
	import {getInformation} from "@/api/home.js"
	import {basUrl} from "@/common/basUrl.js"
	export default {
		created() {
			this.showMyInformation()
		},
		data() {
			return {
			Information:'',
			basUrl:basUrl
			}
		},
		methods: {
			toPersonalData() {
				console.log(123);
				uni.navigateTo({
					url: "/pages/PersonalInformation/PersonalInformation"
				})
			},
			showMyInformation(){
				getInformation().then(res=>{
					console.log(res);
					this.Information = res.data.rows
				})
			}
		}
	}
</script>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
	}

	.content {
		position: absolute;
		width: 100vw;
		height: 100vh;
		background-color: #FB7A42;
		background: url("@/static/Group 234.png") no-repeat;
		background-size: 100%;

		.personal-data {
			position: fixed;
			top: 48rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 146rpx;
			height: 232rpx;
			color: #fff;

			image {
				width: 144rpx;
				height: 144rpx;
			}
		}

		.navigation-box {
			position: fixed;
			top: 328rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 90%;
			height: 456rpx;
			margin-left: 5%;

			.navigation-box-item {
				width: 100%;
				height: 96rpx;
				background-color: #fff;
				filter: drop-shadow(0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06));
				border-radius: 16rpx;
				order: 0;
				align-self: stretch;
				flex-grow: 0;

				.logo-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 30%;
					height: 100%;
					margin-left: 40rpx;
					float: left;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.jiantou {
					width: 28rpx;
					height: 28rpx;
					margin-top: 34rpx;
					margin-right: 40rpx;
					float: right;
				}
			}
		}

		.btn-quit {
			position: fixed;
			bottom: 48rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			width: 246rpx;
			height: 68rpx;
			line-height: 68rpx;
			padding: 0;
			border: 2rpx solid #FB7A42;
			border-radius: 46rpx;
			font-size: 28rpx;
			color: #FB7A42;
		}
	}
</style>

